<template>
  <el-dialog v-model="dialogFormVisible" title="搜索人员" width="500" destroy-on-close top="170px" :draggable="true"
    :modal="false" @closed="handleClose(ruleFormRef)">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      :size="formSize" status-icon>
      <el-form-item label="相似度" prop="similarity">
        <el-input-number v-model="ruleForm.minSimilarity" :precision="2" :step="0.01" :min="0" :max="1"
          placeholder="最小值" style="width: 180px" />
        <span style="padding-left: 12px; padding-right: 12px">至</span>
        <el-input-number v-model="ruleForm.maxSimilarity" :precision="2" :step="0.01" :min="0" :max="1"
          placeholder="最大值" style="width: 180px" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-select v-model="ruleForm.nameValue" clearable placeholder="请选择姓名" style="width: 400px">
          <el-option v-for="item in mapStore.trajectoryNameList" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="IDNumber">
        <el-input v-model="ruleForm.IDNumber" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="拍摄时间">
        <el-config-provider :locale="zhCn">
          <el-date-picker v-model="ruleForm.dataRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            clearable end-placeholder="结束日期" @change="onDatePickerChange" @clear="onDatePickerClear" />
        </el-config-provider>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          搜索
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineExpose } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { formatTimestamp } from "@/tools/utils.js";
import {
  getAjaxPersonnelTableData,
} from "@/api/getAjaxData.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const dialogFormVisible = ref(false);

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  minSimilarity: 0.9,
  maxSimilarity: 1,
  nameValue: "",
  IDNumber: "",
  dataRange: "",
});

const rules = reactive({
  similarity: [{ required: true, validator: checkSimilarity, trigger: ['blur', 'change'] }],
  IDNumber: [
    { required: false, validator: checkNameValue, trigger: 'blur' }
  ]
});

function checkSimilarity(rule, value, callback) {
  console.log("value");
  console.log(value);
  if (ruleForm.minSimilarity.toString().length === 0) {
    callback(new Error('请输入相似度最小值'));
  } else if (ruleForm.maxSimilarity.toString().length === 0) {
    callback(new Error('请输入相似度最大值'));
  } else if (
    ruleForm.minSimilarity >= ruleForm.maxSimilarity
  ) {
    callback(new Error('相似度最小值必须小于相似度最大值'));
  } else {
    callback()
  }
}

function checkNameValue(rule, value, callback) {
  if (value.length === 0) {
    callback();
  } else if (!/^[1-9]\d{5}(18|19|(\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
    callback(new Error('请输入格式正确的身份证号'));
  } else {
    callback();
  }
}

function resetFieldsValue() {
  ruleForm.minSimilarity = 0.9;
  ruleForm.maxSimilarity = 1;
  ruleForm.nameValue = "";
  ruleForm.IDNumber = "";
  ruleForm.dataRange = "";
}

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let startDateTime, endDateTime;

      if (ruleForm.dataRange) {
        startDateTime = formatTimestamp(ruleForm.dataRange[0].getTime());
        endDateTime = formatTimestamp(ruleForm.dataRange[1].getTime() + 86400000);

        if (mapStore.dateTimeRange.length === 0) {
          mapStore.dateTimeRange.push(startDateTime);
          mapStore.dateTimeRange.push(endDateTime);
        } else {
          mapStore.dateTimeRange[0] = startDateTime;
          mapStore.dateTimeRange[1] = endDateTime;
        }
      } else {
        startDateTime = "";
        endDateTime = formatTimestamp(new Date().getTime());
        mapStore.dateTimeRange = [];
      }

      const queryInfo = {
        nameList: ruleForm.nameValue ? [ruleForm.nameValue] : [],
        numberList: ruleForm.IDNumber ? [ruleForm.IDNumber] : [],
        minSimilarity: ruleForm.minSimilarity,
        maxSimilarity: ruleForm.maxSimilarity,
        startDateTime,
        endDateTime,
      };

      console.log("queryInfo");
      console.log(queryInfo);

      dialogFormVisible.value = false;
      // clearInterval(mapStore.trajectoryDetailsTableTimer);
      getAjaxPersonnelTableData(queryInfo);
      // mapStore.trajectoryDetailsTableTimer = setInterval(() => {
      //   getAjaxPersonnelTableData(queryInfo);
      // }, mapStore.intervalTime * 1000);
    } else {
      // ElMessage.error("fields");
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  resetFieldsValue();
  dialogFormVisible.value = false;
};

function handleClose(formEl) {
  formEl.resetFields();
  resetFieldsValue();
}

defineExpose({
  dialogFormVisible,
});
</script>

<style>
@import url("@/assets/main.css");

.el-dialog:not(.is-fullscreen) {
  margin-top: 205px !important;
}

.el-dialog {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 10px !important;
}
</style>
